<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器权重</title>
		<!-- 选择器权重越高，选中几率越大 -->
		<style>
			*{	/* 权值	0	很容易被覆盖 */
				color: #77eecb !important;
				background: #7caaee !important;
			}
			div{	/* 权值	1 */
				color: #cab7ee;
				background: #eeee79;
			}
			.d1{	/* 权值	10 */
				color: #ee4a6e;
				background: #b4eec2;
			}
			div.d1{	/* 选择器权值之和		权值1+10	  11 */
				color: #00ee00;
				background: #d0eece;
			}
			body div.d1{	/* 权值 12 */
				font-size: 25px;
				color: #ee00e2;
				background: #ee6868;
			}
			#d1{	/* 权值 100 */
				font-size: 15px;
				color: #eeee79;
				background: #cab7ee;
			}
			div#d1{	/* 权值 101 */
				font-size: 20px;
				color: #ee9700;
				background: #ee00ea;
			}
			div#d1:hover{	/* 权值111 */
				color: #cab7ee;
				background: #eea085;
			}
		</style>
	</head>
	<body>
		<div class="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur provident numquam ipsum doloribus tenetur. At, dolores atque officia veniam delectus assumenda repudiandae saepe sapiente numquam consequatur cum excepturi neque ipsum!</div>
	</body>
</html>